<style lang="less" rel="stylesheet/less" type="text/less">
.app-edit-form {
  padding-top: 20px;
}
</style>
<template>
  <div>
    <div>APIKEY所属客户：{{ apikeys_detail.customer.name }}</div>
    <div>APIKEY的名称：{{ apikeys_detail.name }}</div>
    <div>APIKEY的key：{{ apikeys_detail.id }}</div>
    <div>APIKEY的状态：{{ apikeys_detail.status }}</div>
    <div v-if="apikeys_detail.type===1">APIKEY的计费类型:按次计费</div>
    <div v-if="apikeys_detail.type===2">APIKEY的计费类型:按时间段计费</div>
    <div v-if="apikeys_detail.type===3">APIKEY的计费类型:永久授权</div>
    <div v-if="apikeys_detail.type===0">APIKEY的计费类型:测试</div>
    <Form ref="formInline" :model="formInline" :rules="ruleValidate" class="app-edit-form">
      <Form-item v-if="apikeys_detail.type===2" label="开始时间" prop="started_at">
        <DatePicker
          v-model="formInline.started_at"
          :style="{width: '260px'}"
          placeholder="请输入开始时间"
          type="datetime"
          placement="top"
          name="create-started_at"
          @on-change="changeSTDate"
        />
      </Form-item>

      <!-- 结束时间 -->
      <Form-item v-if="apikeys_detail.type===2" label="结束时间" prop="ended_at">
        <DatePicker
          v-model="formInline.ended_at"
          :style="{width: '260px'}"
          placeholder="请输入结束时间"
          type="datetime"
          placement="top"
          name="create-ended_at"
          @on-change="changeEDDate"
        />
      </Form-item>

      <Form-item>
        <Button type="primary" name="create__submit" @click="handleSubmit('formInline')">激活</Button>
      </Form-item>
    </Form>
  </div>
</template>
<script>
import { deleteEmptyValue } from "../../../utils";

export default {
  props: {
    apikeys_detail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      real_started_at: null,
      real_ended_at: null,
      startOption: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      formInline: {
        ended_at: null,
        started_at: null,
        id: null
        // start_end: [],
      },
      ruleValidate: {
        started_at: [
          {
            required: true,
            type: "date",
            message: "开始时间是必须的",
            trigger: "blur,change"
          }
        ],
        ended_at: [
          {
            required: true,
            type: "date",
            message: "结束时间是必须的",
            trigger: "blur,change"
          }
        ]
        // start_end: [
        // 	{
        // 		required: true,
        // 		message: '时间是必须的',
        // 		trigger: 'blur,change',
        // 	},
        // ],
      }
    };
  },
  created() {
    this.initForm();
  },
  methods: {
    // 初始化获取status的值
    initForm() {
      this.formInline.id = this.apikeys_detail.id;
      if (this.apikeys_detail.start_time) {
        this.$moment.locale(navigator.language);
        this.real_started_at = this.$moment
          .utc(`${this.apikeys_detail.start_time}`)
          .local()
          .format("lll");

        this.real_ended_at = this.$moment
          .utc(`${this.apikeys_detail.end_time}`)
          .local()
          .format("lll");
      }

      this.formInline.started_at = `${this.real_started_at.substr(
        0,
        4
      )}-${this.real_started_at.substr(5, 2)}-${this.real_started_at.substr(
        8,
        2
      )}${this.real_started_at.substr(11)}:00`;

      this.formInline.ended_at = `${this.real_started_at.substr(
        0,
        4
      )}-${this.real_started_at.substr(5, 2)}-${this.real_started_at.substr(
        8,
        2
      )}${this.real_started_at.substr(11)}:00`;

      console.log(this.formInline.started_at);
    },
    /*
           提交更新
        */

    handleSubmit(name) {
      if (this.apikeys_detail.type === 2) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.$emit("update", this.formInline);
          } else {
            this.$Message.error("你输入的信息有误");
          }
        });
      } else {
        this.$emit("update", deleteEmptyValue(this.formInline));
      }
    },

    changeSTDate(date) {
      this.real_started_at = this.$moment(date)
        .utc()
        .format();
      console.log(this.real_started_at);
    },
    changeEDDate(date) {
      this.real_ended_at = this.$moment(date)
        .utc()
        .format();
    }
  }
};
</script>
